<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*,body{
				padding:0;
				margin:0
			}
			textarea{
			  width: 300px;
			  height: 300px;
			  border: 1px solid royalblue;
			  padding: 20px;
			  border-radius: 5px;
			  resize: none;
			  overflow: hidden;
			}
		</style>
	</head>
	<body>
		<textarea id="textarea" rows="3" cols="">hello</textarea>
		<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function textareaH(){
				var h = $('#textarea').height() + $('#textarea').scrollTop()
			 console.log(h)
			      	$('#textarea').css('height',$('#textarea').height() + $('#textarea').scrollTop()+'px')
			}
			$('#textarea').on('keyup',function(){
			  textareaH()
			})
		</script>
	</body>
</html>
